<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" v-for="po in purchaseOrders" :key="po.id">
        <table class="ui celled table">
          <tr>
            <td colspan="2" class="right aligned">
              <el-button-group>
                <el-button type="primary" @click="downloadVoucher(po.id)" :loading="loading">
                  更新凭证</el-button>
              </el-button-group>
            </td>
          </tr>
          <tr>
            <td class="right aligned">预订单号</td>
            <td>{{po.channelOrderNumber}}</td>
          </tr>
          <tr>
            <td class="right aligned">电子凭证</td>
            <td>
              <a v-if="po.voucherFileUrl" :href="po.voucherFileUrl" target="_blank">下载</a>
              <span v-else>未下载</span>
            </td>
          </tr>
          <tr>
            <td class="right aligned">电子收据</td>
            <td>
              <a v-if="po.receiptFileUrl" :href="po.receiptFileUrl" target="_blank">下载</a>
              <span v-else>未下载</span>
            </td>
          </tr>
          <tr>
            <td class="right aligned">凭证数量</td>
            <td>{{po.amount}}</td>
          </tr>
          <tr>
            <td class="right aligned">订单总额</td>
            <td>{{po.currency}}: {{po.cost/100}}</td>
          </tr>
          <tr>
            <td class="right aligned">支付方式</td>
            <td>{{PaymentMode[po.paymentMode]}}</td>
          </tr>
          <tr>
            <td class="right aligned">信用卡</td>
            <td>{{displayCreditCard(po.creditCard)}}</td>
          </tr>
          <tr>
            <td class="right aligned">账号</td>
            <td>{{po.channelAccount}}</td>
          </tr>
          <tr>
            <td class="right aligned">创建人</td>
            <td>{{po.createUserName + "&lt;" + po.createUserEmail + "&gt;"}}</td>
          </tr>
          <tr>
            <td class="right aligned">创建时间</td>
            <td>{{po.createdOn}}</td>
          </tr>
          <tr>
            <td class="right aligned">支付时间</td>
            <td>{{po.createdOn}}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Orders, PurchaseOrder } from '@/store/api'
import * as Constants from '@/constants'
import ToCentInput from '@/components/to-cent-input'

export default {
  name: 'order-purchase-orders',
  components: {
    ToCentInput
  },
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      ...Constants,
      loading: true,
      purchaseOrders: []
    }
  },
  created() {
    Orders.listPurchaseOrders(this.order.orderNumber).then(data => {
      this.loading = false
      this.purchaseOrders = data
    })
  },
  methods: {
    displayCreditCard(creditCard) {
      const no = creditCard.cardNo.substring(creditCard.cardNo.length - 4)
      return (
        creditCard.owner + '(' + no + ')/' + creditCard.bank + '(' + creditCard.cardType + ')'
      )
    },
    downloadVoucher(purchaseOrderId) {
      PurchaseOrder.downloadVoucher(purchaseOrderId).then(() => {
        this.$message.success('下载凭证任务已发布')
      })
    }
  }
}
</script>
